<template>
	<view class="container">

		<!-- 套餐选择区域 -->
		<view class="packages-section">
			<view class="section-title">
				<text>选择套餐</text>
			</view>
			<view class="packages-list">
				<view 
					class="package-item" 
					:class="{ active: selectedPackage === index }"
					v-for="(pkg, index) in packages" 
					:key="index"
					@click="selectPackage(index)"
				>
					<view class="package-header">
						<text class="package-name">{{ pkg.name }}</text>
						<view class="package-badge" v-if="pkg.badge">
							<text>{{ pkg.badge }}</text>
						</view>
					</view>
					<view class="package-price">
						<text class="current-price">¥{{ pkg.currentPrice }}</text>
						<text class="original-price">¥{{ pkg.originalPrice }}</text>
					</view>
					<view class="package-desc">
						<text></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付方式区域 -->
		<view class="payment-section">
			<view class="section-title">
				<text>付款方式</text>
			</view>
			<view class="payment-methods">
				<view 
					class="payment-item" 
					:class="{ active: selectedPayment === index }"
					v-for="(method, index) in paymentMethods" 
					:key="index"
					@click="selectPayment(index)"
				>
					<view class="payment-left">
						<view class="payment-icon" :class="method.iconClass">
							<text v-if="method.iconText">{{ method.iconText }}</text>
						</view>
						<view class="payment-info">
							<text class="payment-name">{{ method.name }}</text>
							<text class="payment-desc" v-if="method.desc">{{ method.desc }}</text>
						</view>
					</view>
					<view class="payment-right">
						<view class="radio-btn" :class="{ checked: selectedPayment === index }">
							<view class="radio-inner" v-if="selectedPayment === index"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部支付栏 -->
		<view class="bottom-payment">
			<view class="payment-summary">
				<text class="payment-label">待支付:</text>
				<text class="payment-amount">¥{{ selectedPackageData.currentPrice }}</text>
				<text class="payment-original">¥{{ selectedPackageData.originalPrice }}</text>
			</view>
			<view class="pay-button" @click="payNow">
				<text>立即付款</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedPackage: 0, // 默认选中第一个套餐
			selectedPayment: 1, // 默认选中微信支付
			packages: [
				{
					name: '初级套餐',
					currentPrice: '0',
					originalPrice: '9.9',
					badge: ''
				},
				{
					name: '中级套餐',
					currentPrice: '9.9',
					originalPrice: '9.9',
					badge: 'HOT'
				},
				{
					name: '高级套餐',
					currentPrice: '29.9',
					originalPrice: '59.9',
					badge: ''
				}
				
			],
			paymentMethods: [

				{
					name: '微信支付',
					desc: '',
					iconClass: 'icon-wechat',
					iconText: ''
				},
				
			]
		}
	},
	
	computed: {
		selectedPackageData() {
			return this.packages[this.selectedPackage]
		}
	},
	
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 选择套餐
		selectPackage(index) {
			this.selectedPackage = index
		},
		
		// 选择支付方式
		selectPayment(index) {
			this.selectedPayment = index
		},
		
		// 立即付款
		payNow() {
			const pkgData = this.packages[this.selectedPackage]
			const paymentMethod = this.paymentMethods[this.selectedPayment]
			
			uni.showModal({
				title: '确认支付',
				content: `确认使用${paymentMethod.name}支付¥${pkgData.currentPrice}购买${pkgData.name}吗？`,
				success: (res) => {
					if (res.confirm) {
						// 这里可以调用实际的支付接口
						uni.showLoading({
							title: '支付中...'
						})
						
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							
							// 支付成功后返回上一页
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}, 2000)
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx; // 为底部支付栏留出空间
}

/* 页面头部 */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.header-left, .header-right {
	width: 60rpx;
}

.icon-back {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}

.header-title text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

/* 通用标题样式 */
.section-title {
	padding: 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.section-title text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

/* 套餐选择区域 */
.packages-section {
	margin-bottom: 20rpx;
}

.packages-list {
	background-color: #fff;
}

.package-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	transition: all 0.3s ease;
	
	&:last-child {
		border-bottom: none;
	}
	
	&.active {
		background-color: #4a90e2;
		
		.package-name, .package-desc text {
			color: #fff;
		}
		
		.current-price {
			color: #fff !important;
		}
		
		.original-price {
			color: rgba(255, 255, 255, 0.7) !important;
		}
		
		.package-badge {
			background-color: #ff4757;
			color: #fff;
		}
	}
}

.package-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.package-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.package-badge {
	background-color: #ff4757;
	color: #fff;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: bold;
}

.package-price {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.current-price {
	font-size: 36rpx;
	font-weight: bold;
	color: #ff4757;
}

.original-price {
	font-size: 28rpx;
	color: #999;
	text-decoration: line-through;
}

.package-desc text {
	font-size: 24rpx;
	color: #666;
}

/* 支付方式区域 */
.payment-section {
	margin-bottom: 20rpx;
}

.payment-methods {
	background-color: #fff;
}

.payment-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
}

.payment-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
	flex: 1;
}

.payment-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	
	&.icon-wallet {
		background-color: #f0f0f0;
	}
	
	&.icon-wechat {
		background-color: #07c160;
	}
	
	&.icon-alipay {
		background-color: #1677ff;
	}
}

.payment-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.payment-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.payment-desc {
	font-size: 24rpx;
	color: #666;
}

.payment-right {
	display: flex;
	align-items: center;
}

.radio-btn {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #ddd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	
	&.checked {
		border-color: #4a90e2;
		background-color: #4a90e2;
	}
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	background-color: #fff;
	border-radius: 50%;
}

/* 底部支付栏 */
.bottom-payment {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 100;
}

.payment-summary {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.payment-label {
	font-size: 28rpx;
	color: #333;
}

.payment-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #ff4757;
}

.payment-original {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

.pay-button {
	background-color: #4a90e2;
	color: #fff;
	padding: 20rpx 40rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: bold;
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.95);
		background-color: #3a7bc8;
	}
}
</style>